<template>
	<view class="contents">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="title">
			<u-icon name="arrow-down" @click="goback" color="white" size="50"></u-icon>
			<view class="songsmsg">
				<text class="songs">
					{{songs}}
				</text>
				<text class="author">
					{{author}}
				</text>
			</view>
			<view>
				<!-- <view>直播模块</view> -->
				<u-icon name="share" color="white" size="50"></u-icon>
			</view>
		</view>
		<view class="bg" :style='{backgroundImage:"url("+pic+")",height:height}'></view>
		<!-- 图片旋转区域 -->
		<swiper :class="flags ? 'active' : ''" :current="currents">
			<swiper-item>
				<view class="swiper-item">
					<view class="rotation">
						<image lazy-load class="img" :class="!flag ? 'stop' : 'play'" :src="pic" mode="aspectFit">
						</image>
					</view>
				</view>
			</swiper-item>
			<!-- 歌词区域 -->
		</swiper>
		<!-- 收藏下载等 -->
		<view class="play-list">
			<view class="icons">
				<u-icon name="heart" class="imgs" size="60" color="white" v-if="shows" @click="shows =!shows"></u-icon>
				<u-icon name="heart-fill" class="imgs" color="red" size="60" v-else @click="shows =!shows"></u-icon>
				<u-image src="/static/icons/Download.png" width="60" height="60"></u-image>
				<image lazy-load @tap="openComments" class="imgs" src="/static/comment.png"></image>
				<u-icon name="more-dot-fill" size="60"></u-icon>
			</view>
			<!-- 进度条 -->
			<view class="play">
				<view class="time">{{livebofang}}</view>
				<view class="play-slider">
					<u-slider active-color="white" v-model:value="drCountData" :step=step max="100">
					</u-slider>
				</view>
				<view class="time">{{dt}}</view>
			</view>

			<!-- 播放设置 -->
			<view class="play-set">
				<!-- 当前播放模式 -->
				<image class="imgs" :src="mode.icon" @click="playMode()" width="80px" height="50px"></image>
				<!-- 上一首 -->
				<image lazy-load class="imgs" src="@/static/icons/Last-song.png" @click="lastSong()"></image>
				<image lazy-load class="imgs img-play" @tap='play' v-if="!flag" src="@/static/icons/suspend.png">
				</image>
				<image lazy-load class="imgs img-play" @tap='stop' v-else src="@/static/icons/plays.png"></image>
				<!-- 下一首 -->
				<image lazy-load class="imgs" src="@/static/icons/Next-song.png" @click="_playGdMusic()"></image>
				<image lazy-load @click="show =true" class="imgs" src="@/static/icon/playlist.png"></image>
			</view>
		</view>
		<!-- 弹出层 -->
		<view class="prop">
			<u-popup class="propList" @open="open"
				customStyle="width:90%;margin:0 auto;border-radius: 20px;background:#2f3164; margin-bottom:12px;"
				:show="show" @close="shouproplist" mode="bottom" height="50%" border-radius="50">
				<view class="props">
					<view class="prop-item">
						<view style="color: #F1F1F1;">
							<text>当前播放</text>
							<text style="font-size: 5px;color: #aeb1d4;">( {{this.commentlist.length}} )</text>
						</view>
						<view class="playSet">
							<view>
								<image src="../../static/icons/loop.png" mode=""></image>
								<text style="margin-left: 5px;color: #E1E1E1;">列表循环</text>
								<!-- <text class="loop">1</text> -->
							</view>
							<view>
								<u-icon name="trash" size="50"></u-icon>
							</view>
						</view>
					</view>
					<!-- 弹出框获取到的数据 -->
					<scroll-view scroll-y class="scroll">
						<view class="scroll-item" v-for="(item,index) in this.commentlist" :key="index">
							<text>{{item.name}}</text>
							<text style="color: #aeb1d4; font-size: 5px;">- {{item.ar[0].name}}</text>
						</view>
					</scroll-view>
				</view>
			</u-popup>

		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import play from '@/components/play.vue'
	import BingLyric from '@/components/bing-lyric/bing-lyric.vue'
	import {
		getLyric,
		getCardiacPattern
	} from '@/network/play.js'

	import {
		playGdMusic,
	} from '@/network/recommen.js'
	export default {
		data() {
			return {
				shows: true, //爱心
				height: '',
				step: "1", //步长
				show: false, //弹出层
				songlist: [], //储存歌曲的id
				// url: config.url,
				lyric: [], //歌词
				currents: 0,
				flags: false,
				lyrics: '',
				urlmp3:'',
				playModeList: [{
						icon: "../../static/icons/loop.png",
					},
					{
						icon: "../../static/icons/random.png",
					},
					{
						icon: "../../static/icons/single.png",
					},
				], //播放图片
				mode: {
					icon: "../../static/icons/loop.png",
				}, // 当前播放模式 初始化为列表循环
				modeindex: 0, // 当前播放模式的下标值

			}
		},
		components: {
			play,
			BingLyric
		},
		onLoad() {
			console.log(this.musicurl);
			this._playGdMusic()
			this.getCardiacPattern()
		},
		methods: {
			//获取心动、随机模式的网络请求
			async getCardiacPattern() {
				const Beckoning = await getCardiacPattern(this.songId, this.commentlist.id);
				console.log(Beckoning);
			},
			async getLyric() {
				const aa = await getLyric(this.songId)
				console.log(aa);
			},
			// 模式切换
			playMode() {
				this.modeindex++;
				if (this.modeindex == 3) {
					this.modeindex = 0;
				}
				this.mode = this.playModeList[this.modeindex];
			},
			// 上一首
			lastSong() {
				// 没数据不能点击按钮播放 或者 模式等于1（也就是单曲循环）return出去
				if (!t || this.modeindex === 2) {
					// this.$message.error("当前播放模式是单曲循环哦");
					console.log(123);
					return;
				}
			},
			async _playGdMusic() {
				this.$store.commit('increteIndex');
				const res = await playGdMusic(this.commentlist[this.playindex].id)
				this.urlmp3 = res.data[0].url
				console.log(this.urlmp3);
			},
			//下一首
			// audioEnd() {
			// 	this.$store.commit('increteIndex');
			// 	console.log(this.urlmp3);
			// },

			centerBtnClick(e) {
				console.log(e)
				this.current = e.centerTime
			},
			makeTime() {
				let i = 0
				for (i; i < 500; i++) {
					setTimeout(this.out, i * 500, 0.5)
				}
			},
			// 播放和暂停
			play() {
				this.$store.commit('getfalg', true)
			},
			stop() {
				this.$store.commit('getfalg', false)

			},
			// 播放列表
			shouproplist() {
				this.show = !this.show
			},
			//返回首页
			goback() {
				uni.navigateBack({
					data: 1
				})
			},
			//打开评论
			openComments() {
				uni.navigateTo({
					url: '/subpag/songComments/songComments'
				})
			},
		},
		computed: {
			...mapState(['playindex', "musicurl", "size", 'pic', 'songs', 'author', "flag", 'livebofang', 'dt', 'duration',
				'longtime', 'songId', 'current', 'commentlist'
			]),
			drCountData: {
				get() {
					return this.$store.state.duration;
				},
				set(v) {
					this.countData = v
				}
			},
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight + 'px'
				}
			})
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.title {
		justify-content: space-between;
		padding: 50rpx 30rpx;
		display: flex;
		align-items: center;
		z-index: 2;
	}

	.active {
		position: absolute;
		top: 63px !important;
		margin: 0 !important;
		height: 1000rpx;
		font-family: STXihei;
	}

	.img-play {
		width: 50px !important;
		height: 50px !important;
	}

	.play-list {
		position: absolute;
		bottom: 0;
		width: 100%;

		.icons {
			justify-content: space-between;
			padding: 0 30rpx;
			display: flex;

			.imgs {
				width: 30px;
				height: 30px;
			}

		}

		.play {
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			margin-top: 50rpx;

			.play-slider {
				flex: 1;
				padding: 0 20rpx;
			}

			.time {
				font-size: 20rpx;
				color: white;
			}
		}

		.play-set {
			align-items: center;
			display: flex;
			padding: 0 30rpx;
			justify-content: space-between;
			margin: 60rpx 0;

			.imgs {
				width: 30px;
				height: 30px;
			}
		}
	}

	.rotation {
		display: flex;
		justify-content: center;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
	}

	.lyrics {
		width: 100% !important;
	}

	swiper {
		width: 100%;
		height: 440rpx;
		position: absolute;
		top: 0px;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		transition: 1s all linear;
	}

	.img {
		width: 440rpx;
		height: 440rpx;
		border-radius: 100%;
		animation: play 20s linear infinite;
	}

	@keyframes play {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.play {
		animation-play-state: running;
	}

	.stop {
		-webkit-animation-play-state: paused !important;
		/* Safari 和 Chrome */
	}

	.songsmsg {
		display: flex;
		flex-direction: column;
		text-align: center;
		color: white;

		.songs {
			font-size: 25rpx;
		}

		.author {
			color: #e5e5e5;
			font-size: 20rpx;
		}
	}

	.title {
		justify-content: space-between;
		padding: 50rpx 30rpx;
		display: flex;
		align-items: center;
		z-index: 2;
	}

	.contents {
		width: 100%;
		// filter: blur(50px);
		// background-size: 00px;
		// background-repeat: no-repeat;

		display: flex;
		flex-direction: column;
		// position: relative;
	}

	// 弹出层样式
	.prop {
		z-index: 3;
		width: 80%;
		padding: 30rpx 30rpx;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		position: absolute;

	}

	.props {
		z-index: 3;
		height: 450px;
		// overflow: hidden;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

	}

	.scroll {
		height: 82%;

		&-item {
			color: #F1F1F1;
			cursor: pointer;
			max-width: 60%;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			padding: 20px 20px;


		}
	}

	.prop-item {
		padding: 30rpx;
		display: flex;
		border-radius: 10px;
		flex-direction: column;
	}

	// 播放设置''
	.playSet {
		display: flex;
		justify-content: space-between;
		align-items: center;

		view {
			position: relative;
			display: flex;
			align-items: center;

			image {
				width: 20px;
				height: 20px;
			}

			.loop {
				position: absolute;
				left: 5px;
				font-size: 2px;
				margin-top: .5px;
			}
		}
	}

	// .scroll-item {
	// 	height: 100rpx;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;

	// 	view {
	// 		display: flex;
	// 	}

	// 	text {
	// 		display: block;
	// 		white-space: nowrap;
	// 		overflow: hidden;
	// 		text-overflow: ellipsis;
	// 	}
	// }

	.propList {
		width: 98% !important;
		margin-left: 3.5px;

	}

	.bg {
		height: 100%;
		background-size: cover;
		filter: blur(60px);
		// filter: blur(20px);
		background-position: center center;
		margin-top: -80px;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.u-cell>text {
		color: red;
	}
</style>
